<template>
  <div>
    <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>会议室查询</el-breadcrumb-item>
          <el-breadcrumb-item>全部会议室</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 当前预定 -->
      <el-card>
        <el-table :data="tableData">
          <el-table-column label="会议室唯一id" prop="cid"></el-table-column>
          <el-table-column label="会议室名" prop="name"></el-table-column>
          <el-table-column label="类型" prop="type"></el-table-column>
          <el-table-column label="最大容纳人数" prop="capacity"></el-table-column>
          <el-table-column label="当前状态" prop="status">
          </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="page">
        </el-pagination>
      </el-card>
  </div>
</template>

<script>
export default {
  data() {
      return {
        pageSize: 1,
        total: 1,
        tableData: null
      }
  },

  methods: {
    async page(currentPage){
        console.log(currentPage)
        this.$axios({
            method:"post",
            url:"http://localhost:80/conferenceroom/selectAllRoomPage",
            params:{
                current:currentPage,
                size:5
            }
        }).then(res=>{

            console.log(res)
            this.pageSize = res.data.data.size
            this.total = res.data.data.total
            this.tableData= res.data.data.records
        })
      // console.log(res)
    },
      getPage(){
          this.$axios({
              method:"post",
              url:"http://localhost:80/conferenceroom/selectAllRoomPage",
              params:{
                  current:1,
                  size:5
              }
          }).then(res=>{
              console.log(res)
              this.pageSize = res.data.data.size
              this.total = res.data.data.total
              this.tableData= res.data.data.records
          })
          // console.log(res)
      }
  },

  async created() {
      this.getPage()
  }
};
</script>

<style lang="less" scoped>
</style>
